<template>
  <el-dropdown trigger="click" class="h-full" @command="handleCommand">
    <div class="flex items-center px-4 text-[#fff]">
      <img
        src="@/assets/images/home/language.png"
        width="20"
        height="20"
        class="mr-2"
      />
      <el-icon><ArrowDown /></el-icon>
    </div>

    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="lang in langs" :command="lang">{{
          lang.title
        }}</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup>
import { ref } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";

import { langs } from "@/lang";
import { useLocaleStore } from "@/store/modules/lang";

const useLocale = useLocaleStore();

let curLocale = "zh";
let currentLan = ref(langs.find((item) => item.key === curLocale).title);
console.log(currentLan.value, "lang");

function handleCommand(command) {
  currentLan.value = command.title;
  useLocale.setLocale(command.key);
}
</script>
